import "./register.css";
import useForm from "@module/useForm";
import Input from "@ui/RJMart/input";
import Icon from "@ui/RJMart/icons";
import RobinFilter from "@module/RobinFilter";
import ZenModal from "@root/components/ZenUI/ZenModal/ZenModal";
import usePartState from "@module/usePartState";
import REST from "@module/Rest";
import RSA from "@module/EncryptPW";

export default function StepOne(props) {
    const params = $state.params;
    const { registerType, token } = params || {};

    const [stateObj, updateState] = usePartState({ checked: false });
    function doSubmit() {
        const isValid = formData.$$valid && stateObj.checked;
        if (isValid) {
            //发送邮件
            // ZenUI.SL(60);
            let sendUrl, sendData;
            if (params.registerType == 1) {
                if (!formData.verificationCode) {
                    updateFormData({
                        $$status: { verificationCode: "请先输入验证码" }
                    });
                    return false;
                }

                sendUrl = "/store/api/invite/sendRegisterEmail";
                sendData = {
                    email: formData.email,
                    confirmPassword: RSA.webencryptAES(formData.password2),
                    password: RSA.webencryptAES(formData.password),
                    token: params.token
                };
            } else {
                sendUrl = "/suppliers/anon/supplierRegister";
                sendData = {
                    email: formData.email,
                    password: formData.password
                };
            }
            REST.post(sendUrl, sendData, "dis").then(
                function(data) {
                    // ZenUI.HL();
                    console.log(data);
                    if (data.code == "0000") {
                        doStepOne();
                    } else {
                        // alert(data.message);
                        updateFormData({
                            $$status: { email: data.message }
                        });
                    }
                },
                function(error) {
                    // ZenUI.HL();
                    console.log(error);
                }
            );
        }
    }

    function doStepOne() {
        if (params.registerType == 1) {
            $state.go({
                stateName: "/register",
                params: {
                    step: 2,
                    registerType: params.registerType,
                    email: formData.email,
                    confirmPassword: RSA.webencryptAES(formData.password2),
                    password: RSA.webencryptAES(formData.password),
                    token: params.token
                }
            });
        } else {
            $state.go({
                stateName: "/register",
                params: {
                    step: 2,
                    registerType: params.registerType,
                    email: formData.email,
                    password: formData.password,
                    token: params.token
                }
            });
        }
    }

    //生命周期 页面渲染完后再执行，每次刷新前也执行
    React.useEffect(() => {
        params.registerType == 1 ? getVerificationCode() : "";
    }, []);

    //定义全局变量 const [scope值，更新方法] = React.useState({初始化的值});
    const [currentScope, updateCurrentScope] = React.useState({});

    //更新视图数据 私有的方法前缀用_
    function _updateData(value) {
        let newValue = { ...currentScope, ...value };
        // console.log(newValue);
        updateCurrentScope(newValue);
    }

    const {
        formData,
        handleChange,
        handleSubmit,
        updateFormData,
        validations,
        addValidate,
        addValidateMulti
    } = useForm(doSubmit, {}, "regiForm");

    function validateIsSame1(value) {
        let res = RobinFilter.passWordValidate(value);
        if (res) {
            return res;
        }
        if (formData.password2 && value != formData.password2) {
            return "两次输入的密码不一致";
        }
        formData.$$status.password2 = "";
        return "";
    }

    function validateIsSame2(value) {
        let res = RobinFilter.passWordValidate(value);
        if (res) {
            return res;
        }
        if (formData.password && value != formData.password) {
            return "两次输入的密码不一致";
        }
        formData.$$status.password = "";
        return "";
    }

    function verifyCodeValidate(value) {
        ZenUI.SL(60);
        let vcUrl = `/store/api/invite/verificationCode`;
        let vcData = {
            code: formData.verificationCode
        };
        let headerConfig = {
            contentType: 1
        };
        REST.post(vcUrl, vcData, "dis", headerConfig).then(
            function(data) {
                ZenUI.HL();
                console.log(data);
                if (data.code == "0000") {
                    _updateData({ errorImgInfo: "" });
                } else {
                    _updateData({ errorImgInfo: data.message });
                }
            },
            function(error) {
                ZenUI.HL();
                console.log(error);
            }
        );
    }

    addValidateMulti({
        email: [RobinFilter.emailValidate],
        password: [validateIsSame1],
        password2: [validateIsSame2]
    });

    function beforeHandleChange(event) {
        handleChange(event);
        // console.log(formData)
    }

    function updateChecked() {
        let checked = stateObj.checked;
        updateState({ checked: !checked });
    }

    function getVerificationCode() {
        ZenUI.SL(60);
        let imgUrl = `/store/api/invite/getVerificationCode`;
        let imgData = {
            time: new Date().getTime()
        };
        REST.post(imgUrl, imgData, "noInfo").then(
            function(data) {
                ZenUI.HL();
                console.log(data);
                if (data) {
                    _updateData({
                        imgUrl:
                            "/store/api/invite/getVerificationCode" +
                            "?time=" +
                            Date.parse(new Date())
                    });
                }
            },
            function(error) {
                ZenUI.HL();
                console.log(error);
            }
        );
    }

    return (
        <form
            className={"regi-content-form zen_p-b-80 zen_m-t-40"}
            name={"regiForm"}
        >
            <InputItem
                name={"email"}
                title={"邮箱"}
                placeholder={"请输入邮箱"}
                handleChange={beforeHandleChange}
                formData={formData}
            />

            <InputItem
                name={"password"}
                title={"密码"}
                placeholder={"由10-20位的数字、大小写字母组成"}
                handleChange={beforeHandleChange}
                type={"password"}
                formData={formData}
            />

            <InputItem
                name={"password2"}
                title={"确认密码"}
                placeholder={"请再次输入密码"}
                handleChange={beforeHandleChange}
                type={"password"}
                formData={formData}
                index={3}
            />

            {params.registerType == 1 && (
                <div>
                    <div className="a-vftCode-wrap zen_ps-re">
                        <InputItem
                            name={"verificationCode"}
                            title={"验证码"}
                            placeholder={"请输入"}
                            handleChange={beforeHandleChange}
                            formData={formData}
                            onBlur={verifyCodeValidate}
                        />
                        <img
                            onClick={getVerificationCode}
                            src={currentScope.imgUrl}
                            className="zen_ps-ab a_r-300 zen_t-0 zen_il-bl zen_w-120 zen_h-40"
                        />
                    </div>
                    {currentScope.errorImgInfo && (
                        <div className="regi-content-inputs regi-content-error-tip">
                            {currentScope.errorImgInfo}
                        </div>
                    )}
                </div>
            )}

            <Agreements setChecked={updateChecked} />

            <NextStep
                formData={formData}
                doSubmit={doSubmit}
                checked={stateObj.checked}
            />
        </form>
    );
}

function InputItem(props) {
    const {
        title,
        placeholder,
        index,
        handleChange,
        name,
        type,
        onBlur
    } = props;
    let formData = props.formData;
    console.log(formData);

    function addName() {
        let inputEle = document.querySelector(
            `.regi-inputs-input>div[name=${name}] input`
        );
        if (inputEle) {
            inputEle.setAttribute("name", name);
        }
    }

    React.useEffect(() => {
        addName();
    }, []);

    const isValid =
        formData.$$status.hasOwnProperty(name) && formData.$$status[name]
            ? false
            : true;

    return (
        <div className={"regi-content-inputs"}>
            <div
                className={
                    index == 3
                        ? "regi-content-label2-box"
                        : "regi-content-label-box"
                }
            >
                <span className={"regi-content-label"}>{title}</span>
            </div>
            <div className={"regi-inputs-input"}>
                <Input
                    name={name}
                    placeholder={placeholder}
                    onChange={handleChange}
                    error={!isValid}
                    type={type}
                    onBlur={onBlur}
                    statusIcon={
                        isValid ? null : (
                            <Icon
                                type="exclamation-circle-fill"
                                color="error"
                                width="18.26px"
                                height="18.26px"
                            />
                        )
                    }
                />

                {!isValid && (
                    <p className={"regi-content-error-tip"}>
                        {formData.$$status[name]}
                    </p>
                )}
            </div>
        </div>
    );
}

function Agreements(props) {
    const [checked, updateState] = React.useState(false);
    const handleChange = e => {
        updateState(!checked);
        props.setChecked(checked);
    };

    function showModal() {
        function closeModal(value) {
            // console.log("run closeModal", value);
            modal.remove();
        }

        function Content(props) {
            props.item.passParams && props.item.passParams("abc");
            return (
                <div className="zen_fs-12 zen_646464">
                    {/*<p className="zen_l-h-50 zen_fs-16 zen_m-b-10" ></p>*/}
                    <p className="zen_l-h-22 zen_m-t-20 zen_fs-14 ">
                        1、锐竞采购平台服务条款的确认与接纳
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        1.1
                        锐竞采购平台是专注于医院科研的采购服务平台，为医学科研单位提供全方位的采购服务。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        1.2
                        锐竞采购平台的各项电子服务的所有权和运作权归广州锐竞信息科技有限责任公司所有。会员若完全同意所有服务条款，并完成注册程序，即可成为锐竞采购平台正式会员。
                    </p>
                    <br />
                    <p className="zen_l-h-22 zen_fs-14 zen_m-t-10">
                        2、平台服务
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        2.1
                        锐竞采购平台以自己的操作系统，通过互联网为会员提供www.rjmart.cn前端网站服务
                        。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        2.2
                        用户在本站进行浏览、下单购物等活动时，涉及用户真实姓名/名称、通信地址、联系电话、电子邮箱等隐私信息的，本站将予以严格保密，除非得到用户的授权或法律另有规定，本站不会向外界披露用户隐私信息。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        2.3
                        用户注册成功后，将产生用户名和密码等账户信息，您可以根据本站规定改变您的密码。用户应谨慎合理的保存、使用其用户名和密码。用户若发现任何非法使用用户账号或存在安全漏洞的情况，请立即通知本站并向公安机关报案。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        2.4
                        用户同意，锐竞采购平台拥有通过邮件、短信电话等形式，向在本站注册、购物用户、收货人发送订单信息、促销活动等告知信息的权利。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        2.5
                        用户不得将在本站注册获得的账户借给他人使用，否则用户应承担由此产生的全部责任，并与实际使用人承担连带责任。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        2.6
                        用户同意，锐竞采购平台有权使用用户的注册信息、用户名等信息，登陆进入用户的注册账户，进行证据保全，包括但不限于公证、见证等。
                    </p>
                    <br />

                    <p className="zen_l-h-22 zen_fs-14 zen_m-t-10">
                        3、会员的权利和义务
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.1
                        会员对其发布的商品信息负责，应提供真实、准确的商品信息，不得发布虚假、伪劣的商品，绝对禁止发布误导性的、恶意的消息，本平台对会员发布的信息的真实性。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.2
                        会员不得在本平台售卖国家禁止销售的或限制销售的物品、不得售卖侵犯他人知识产权或其他合法权益的物品，也不得售卖违背社会公共利益或公共道德的物品。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.3
                        会员在本平台交易中应当遵守诚实信用原则，不得以干预或操纵物品价格等不正当竞争方式扰乱网上交易秩序，不得从事与网上交易无关的不当行为，不得在平台上发布任何违法信息。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.4
                        本平台向会员提供的商品信息之编辑、编制、传播的版权和知识产权，全部由锐竞采购平台拥有；未经锐竞采购平台事先以书面表示同意，任何人不得以各种形式复制、散布、出售、出版、广播、转播该商品信息。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.5
                        本平台如发现会员所发布的商品不真实、违规、侵权等行为有权对其商品强制下架，如会员提供的资料包含有不正确的信息，将发出警告，并保留停止或终止其会员资格的权利。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.6
                        会员在本平台交易过程中如与其他用户因交易产生纠纷，可以请求本平台从中予以协调。会员如发现其他会员有违法或违反本协议的行为，可以向本平台举报。如会员因网上交易与其他用户产生诉讼的，会员有权通过司法部门要求本平台提供相关资料。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.7 会员应自行承担因交易产生的相关费用，并依法纳税。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.8
                        本平台只提供采购信息服务平台，不对会员在本平台的交易行为以及任何不遵守法律或行业规范的行为承担责任。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.9
                        由于通讯、电力或不可抗力等任何非平台原因导致不能为会员提供或不能及时提供信息技术服务的，平台不承担责任。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.10
                        未经本平台书面允许，会员不得将本平台资料以及在平台上所展示的任何信息以复制、修改、翻译等形式制作衍生作品、分发或公开展示。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.11
                        会员应随时更新注册资料，以符合及时、详尽、准确的要求。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.12
                        会员若发现本平台发布的信息不准确或发生错误，以及其它错误行为，应及时通知本平台。
                    </p>
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20">
                        {" "}
                        3.13
                        会员如违反本协议而造成锐竞采购平台的经济损失，本平台有权追究其经济责任与法律责任。
                    </p>
                    <br />
                    <br />
                    <p className="zen_l-h-22 regi_t_indent_20 zen_f-right zen_m-r-50 zen_m-b-40">
                        {" "}
                        广州锐竞信息科技有限责任公司
                    </p>
                    <br />
                </div>
            );
        }
        let options = {
            header: "锐竞采购平台服务协议",
            modalClass: "zen_bdr-5 register-step3-zen-model",
            // footer: "test footer",
            content: Content,
            size: "md",
            hideFooter: true,
            // cbList: [closeModal],
            close: closeModal
        };
        let modal = ZenModal.loadModal(options);
        modal.show();
        return false;
    }

    return (
        <div className={"regi-agree zen_cur-p"}>
            <div className="zen_il-bl" onClick={handleChange}>
                <span className={"zen_il-bl zen_v-m regi-agree-checkbox"}>
                    {checked && (
                        <Icon type={"check"} className={"regi-agree-icon"} />
                    )}
                </span>
                <span className={"zen_il-bl regi-agree-t1"}>
                    我同意并遵守上述的
                </span>
            </div>
            <span
                onClick={showModal}
                className={"regi-agree-t2"}
            >{`《锐竞采购平台服务协议》`}</span>
        </div>
    );
}

function NextStep(props) {
    const { doSubmit, formData, checked } = props;
    const isValid = formData.$$valid && checked;
    return (
        <div
            onClick={doSubmit}
            className={
                isValid ? "regi-content-next-step" : "regi-content-next-step1"
            }
        >
            <p>下一步</p>
        </div>
    );
}
